在3D的應用當中, 光源Light是相當普遍的運用, 如果該3D場景Scene沒有光源, 通常會是黑漆漆的一片, 看不到東西。
在three.js中有以下幾種預設光源可供使用
其中在一個場景中最基本的光線就是環境光AmbientLight, 我們用該光源來添加一些顏色以及弱化陰影, 但由於環境光AmbientLight不會真正的產生光線, 因此通常會搭配其他光源使用。
參考以下範例, 了解幾個常用的光源
// 首先建立一個最基本的場景, 其中包含一個方塊
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
)
camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
camera.lookAt(new THREE.Vector3(0, 0, 0))
let renderer = window.WebGLRenderingContext ?
new THREE.WebGLRenderer() : new THREE.CanvasRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
let geometry = new THREE.CubeGeometry(1, 1, 1)
// 這裡我們選用一個能夠對光源產生反應的材質
// 更多關於材質的介紹將會在之後提及
let material = new THREE.MeshPhongMaterial({
color: '#ff0000'
})
let cube = new THREE.Mesh(geometry, material)
scene.add(cube)
renderer.render(scene, camera)
接著我們在render之前加入環境光AmbientLight, 觀察變化
// ... 略
let ambientLight = new THREE.AmbientLight('#0c0c0c')
scene.add(ambientLight)
renderer.render(scene, camera)
觀察變化後可以發現, 正如先前所說, 畫面上並沒有產生甚麼變化
我們接著加入第二光源, 聚光燈SpotLight
// ... 略
let ambientLight = new THREE.AmbientLight('#0c0c0c')
scene.add(ambientLight)
let spoltLight = new THREE.SpotLight(0xFFF000)
// 設定光源位置
spoltLight.position.set(3, 3, 3)
// 設定光源目標
spoltLight.target = cube
scene.add(spoltLight)
renderer.render(scene, camera)
接著我們就能看到畫面中的cube終於出現了鮮明的紅色
為了讓效果更加明顯, 調整render方式
// renderer.render(scene, camera)
render()
function render() {
cube.rotation.x -= .01
cube.rotation.y -= .01
cube.rotation.z -= .01
renderer.render(scene, camera)
requestAnimationFrame(render)
}
這裡我們調整render方式, 賦予cube旋轉效果, 明顯看出各個面對於光餘所產反映
緊接著我們再加入另一個光源, 點光源PointLight
let spoltLight = new THREE.SpotLight(0xFFF000)
// 設定光源位置
spoltLight.position.set(3, 3, 3)
// 設定光源目標
spoltLight.target = cube
// 關閉SpotLight來觀察PointLight
// scene.add(spoltLight)
let pointLight = new THREE.PointLight({
color: '#ccffcc',
distance: 100 // 光線照亮距離
})
// 點光源, 光線強度
pointLight.intensity = 5
// 點光源位置
pointLight.position.set(3, 0, 0)
scene.add(pointLight)
// renderer.render(scene, camera)
render()
function render() {
// 光源能夠在場景中移動
pointLight.rotation.y += .01
cube.rotation.x -= .01
cube.rotation.y -= .01
cube.rotation.z -= .01
renderer.render(scene, camera)
requestAnimationFrame(render)
}
以上三個光源是在3D場景中最常被使用到的
使用光源的時候主要注意光源的位置, 以及場景中幾何
所使用的材質
是否能夠對光源產生反應。
更多關於燈光的介紹與使用請查看,官方文件